---
interface Props {
   bannerName: string;
   imgSrc: string;
   aHref: string;
}
const { bannerName, imgSrc, aHref} = Astro.props
---
<li class="shrink-0 h-36 group w-64 mx-2 overflow-hidden rounded-lg">
    <a th:href={aHref} th:alt={bannerName} ondragstart="return false;">
    <img 
      class="h-36 w-64 transition-all duration-500 ease-[cubic-bezier(0.25,0.8,0.25,1)] object-cover pointer-events-none group-hover:scale-105"
      th:alt={bannerName}
      th:src={imgSrc}
      loading="lazy"
    />
    <div class="relative pointer-events-none bottom-36 h-36 w-64 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-60 group-hover:opacity-100">
       <slot></slot>
    </div>
  </a>
</li>